<template>
  <div class="toplist-body">
    <div class="g-sd3">
      <ul class="toplists">
        <li
          v-for="(item, index) in tracksList"
          :key="index"
          @click="getview(item.id)"
        >
          <img :src="item.coverImgUrl" alt="" />
          <p>
            <a href="javascript:;">{{ item.name }}</a>
          </p>
          <p>{{ item.updateFrequency }}</p>
        </li>
      </ul>
    </div>
    <div class="g-right">
      <p>pppppp{{ viewList.name }}</p>
    </div>
  </div>
</template>

<script>
import { getTracks } from "@/api/singer";
export default {
  data() {
    return {
      tracksList: [],
      viewList: [],
      id: "",
    };
  },
  created() {
    this.gettop();
    this.getview();
    console.log(this.tracksList);
  },
  methods: {
    async gettop() {
      let res = await getTracks();
      this.tracksList = res.list;
      // console.log(this.tracksList);
    },
    async getview(index) {
      this.id = index;
      let res = await fetch(
        `http://music.eleuu.com/playlist/detail?id=${this.id}`
      ).then((res) => res.json());
      console.log(res);
    },
  },
};
</script>

<style lang="less" scoped>
</style>